<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>数据表单</title>
    <link rel="stylesheet" href="/css/layui.css">
    <link rel="stylesheet" href="/scriptZIP/layui.min.css">
    <link rel="stylesheet" href="/css/item.css">
    <link rel="stylesheet" href="/scriptZIP/flatpickr.min.css">
    <link rel="stylesheet" href="/css/popup.css">
    <link rel="stylesheet" href="/css/eliminate_timetable.css">
    <style>
        .layui-input {
            text-align: center;
            line-height: 30px;
            width: 200px; /* 输入框宽度 */
        }

        .layui-form-label {
            text-align: right;
            width: 150px; /* 标签宽度 */
        }

        .form-container {
            display: flex;
            justify-content: space-between; /* 控制元素之间的间距 */
            align-items: flex-start; /* 元素顶部对齐 */
            margin: 20px auto;
            width: 90%; /* 控制表单的整体宽度 */
        }

        .input-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative; /* 使子元素的绝对定位相对于此元素 */
            margin-right: 10px;
            width: 24%;
        }

        .form-container .layui-btn {
            margin-top: 10px;
        }

        /* 为动态输入框设置样式 */
        .dynamic-inputs {
            position: absolute; /* 绝对定位 */
            top: 50px; /* 定义顶部位置，确保在输入框下方 */
            left: 0; /* 左侧对齐 */
            width: 100%; /* 占据整个宽度 */
        }

        .dynamic-inputs .input-container {
            margin-top: 5px; /* 添加间距 */
        }
    </style>
</head>

<body>
    <div class="form-wrapper">
        <form class="layui-form" action="" method="post">
            <h3 style="text-align: center;">类目设置</h3>

            <div class="form-container">
                <!-- 数据状态 -->
                <div class="input-group">
                    <label class="layui-form-label">数据状态</label>
                    <input type="text" name="dataStatus[]" placeholder="请输入数据状态" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-primary" onclick="addInput('dataStatus-container', '请输入数据状态')">添加</button>
                    <div id="dataStatus-container" class="dynamic-inputs"></div> <!-- 动态添加输入框的容器 -->
                </div>

                <!-- 数据意向 -->
                <div class="input-group">
                    <label class="layui-form-label">数据意向</label>
                    <input type="text" name="dataIntent[]" placeholder="请输入数据意向" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-primary" onclick="addInput('dataIntent-container', '请输入数据意向')">添加</button>
                    <div id="dataIntent-container" class="dynamic-inputs"></div> <!-- 动态添加输入框的容器 -->
                </div>

                <!-- 未报读理由 -->
                <div class="input-group">
                    <label class="layui-form-label">未报读理由</label>
                    <input type="text" name="noEnrollReason[]" placeholder="请输入未报读理由" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-primary" onclick="addInput('noEnrollReason-container', '请输入未报读理由')">添加</button>
                    <div id="noEnrollReason-container" class="dynamic-inputs"></div> <!-- 动态添加输入框的容器 -->
                </div>

                <!-- 数据来源 -->
                <div class="input-group">
                    <label class="layui-form-label">数据来源</label>
                    <input type="text" name="dataSource[]" placeholder="请输入数据来源" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-primary" onclick="addInput('dataSource-container', '请输入数据来源')">添加</button>
                    <div id="dataSource-container" class="dynamic-inputs"></div> <!-- 动态添加输入框的容器 -->
                </div>
            </div>
        </form>
    </div>

    <script src="https://cdn.staticfile.net/layui/2.8.6/layui.js"></script>
    <script>
        function addInput(containerId, placeholder) {
            // 获取指定的输入框容器
            var container = document.getElementById(containerId);

            // 检查容器是否存在
            if (container) {
                // 创建新的输入框容器
                var newInputDiv = document.createElement('div');
                newInputDiv.className = 'input-container'; // 设置样式类

                // 创建新的输入框
                var newInput = document.createElement('input');
                newInput.type = 'text';
                newInput.name = containerId.replace('-container', '[]'); // 根据容器ID设置name属性
                newInput.placeholder = placeholder;
                newInput.className = 'layui-input'; // 添加layui样式

                // 添加新的输入框到新容器中
                newInputDiv.appendChild(newInput);

                // 将新的输入框容器添加到页面中
                container.appendChild(newInputDiv);
            } else {
                console.error("容器未找到: " + containerId);
            }
        }
    </script>
</body>

</html>
